<template>
	<view>
		<!-- 选择收货地址盒子 -->
		<view class="address-choose-box" v-if="!address || Object.keys(address).length === 0">
			<button type="primary" size="mini" class="btnChooseAdress" @click="chooseAdress">请选择收货地址+</button>
			<!-- <button type="default" size="mini" class="btnLocation" @click="getLocation">使用当前位置</button> -->
			<!-- <view class="address-tip">
				<text>提示：您可以在微信中管理收货地址</text>
				<text>微信 -> 我 -> 设置 -> 通用 -> 收货地址</text>
			</view> -->
		</view>
		
		
		<!-- 渲染收货信息的盒子 -->
		<view class="address-info-box" v-else @click="chooseAdress">
			<view class="row1">
				<view class="row1-left">
					<view class="username">收货人:{{address.userName}}</view>
				</view>
				<view class="row1-right">
					<view class="phone">电话:{{address.telNumber}}</view>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
			<view class="row2">
				<view class="row2-left">收货地址:</view>
				<view class="row2-right">{{addstr}}</view>
			</view>
		</view>
		
		
		<!-- 底边的边框线 -->
		<image src="" mode="" class="address-border"></image>
	</view>
</template>
<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	
	export default {
		data(){
			return{
				// address:{}
			}
		},
		methods:{
			...mapMutations('my_user',['updateAdress']),
			
			async chooseAdress(){
				try {
					const res = await uni.chooseAddress()
					if(res.errMsg === 'chooseAddress:ok'){
						this.updateAdress(res)
					}
				} catch (err) {
					uni.showToast({
						title: '获取地址失败',
						icon: 'none'
					})
				}
			},
			
			// 获取当前位置
			// async getLocation() {
			// 	try {
			// 		const res = await uni.getLocation({
			// 			type: 'gcj02'
			// 		})
					
			// 		// 使用经纬度获取详细地址
			// 		const address = await this.getAddressFromLocation(res.latitude, res.longitude)
					
			// 		// 更新地址信息
			// 		this.updateAdress({
			// 			userName: '当前位置',
			// 			telNumber: '',
			// 			provinceName: address.province,
			// 			cityName: address.city,
			// 			countyName: address.district,
			// 			detailInfo: address.address
			// 		})
			// 	} catch (err) {
			// 		uni.showToast({
			// 			title: '获取位置失败',
			// 			icon: 'none'
			// 		})
			// 	}
			// },
			
			// 根据经纬度获取详细地址
			// async getAddressFromLocation(latitude, longitude) {
			// 	try {
			// 		// 这里使用腾讯地图API示例
			// 		const key = 'YOUR_MAP_KEY' // 替换成您的腾讯地图Key
			// 		const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${key}`
					
			// 		const res = await uni.request({
			// 			url: url,
			// 			method: 'GET'
			// 		})
					
			// 		if(res.data.status === 0) {
			// 			const result = res.data.result
			// 			return {
			// 				province: result.address_component.province,
			// 				city: result.address_component.city,
			// 				district: result.address_component.district,
			// 				address: result.address
			// 			}
			// 		} else {
			// 			throw new Error('获取地址失败')
			// 		}
			// 	} catch (err) {
			// 		console.error('获取地址失败：', err)
			// 		// 返回默认地址
			// 		return {
			// 			province: '广东省',
			// 			city: '深圳市',
			// 			district: '南山区',
			// 			address: '科技园路'
			// 		}
			// 	}
			// }
		},
		computed:{
			...mapState('my_user',['address']),
			...mapGetters('my_user',['addstr'])
		}
	}
</script>
<style>
	/* 底边的边框线css */
	/* 收货信息盒子css */
	.address-tip {
		margin-top: 10px;
		font-size: 12px;
		color: #999;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.btnLocation {
		margin-top: 10px;
	}
</style>
